<template>
  <div>
    <h1>{{ 1 + 1 }}</h1>
    <p>{{ age > 18 ? "成年" : "未成年" }}</p>
    <!-- v-bind:属性名="js中data中变量"  插值表达式是把内容渲染到i页面-->
    <!-- v-bind作用让数据渲染到页面 在属性中-->
    <a v-bind:href="link" v-bind:title="title">点击百度</a>
    <a :href="link" :title="title">点击百度</a>
    <hr />
    <!-- 加按钮 v-on:click添加点击事件-->
    <!-- v-on:事件名=“要执行的少量代码" -->
    <!-- 只有事件回调函数只有一行的时候才可以这样写 -->
    <button type="button" v-on:click="count = count + 1">{{ count }}</button>
    <button type="button" v-on:click="count = count + 1">{{ count }}</button>
    <hr />
    <!-- 事件回调函数只要有两行以上，就用method方法来写 -->
    <!-- 如果在html中，this是不能写的，默认就会去data中找变量 -->
    <!-- 如果是js，必须要加this -->
    <!-- v-on:事件名=“methods中的函数名" 标准写法-->
    <button type="button" v-on:click="add">{{ count }}</button>
    <!-- 缩写  在vue中add = add()-->
    <button type="button" @click="add">{{ count }}</button>
    <button type="button" @click="add()">{{ count }}</button>
    <hr />

    <!-- 事件需要传参的是很好必须add（参数） -->
    <button type="button" @click="add1(2)">{{ count }}</button><br />
    <!-- fn没有括号的情况，直接 写e就可以了 -->
    <a href="http://www.baidu.com" @click="fn">超链接</a>
    <!-- 如果有fn（）的情况，需要阻止默认行为就得$event -->
    <a href="http://www.baidu.com" @click="fn(3, $event)">超链接</a>
  </div>
</template>

<script>
console.log(123);
//插值  表达式一定有返回值
export default {
  // 默认导出
  data() {
    return {
      age: 16,
      link: "https://www.baidu.com",
      title: "我是标题",
      count: 1,
    };
  },
  //   事件方法  两个对象里为什么用this
  methods: {
    add() {
      console.log(this);
      this.count++;
    },
    add1(num) {
      this.count += num;
    },
    fn(e) {
      console.log(123);
      e.preventDefault(); //阻止默认行为
    },
  },
};
</script>

<style scoped lang="less">
/* scoped有隔离的效果，就是样式只会对template有效 */
div {
  h1 {
    color: red;
  }
}
</style>
